<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<style type="text/tailwindcss">
    @layer utilities {
        .touch-feedback {
            transition: transform 0.1s ease-in-out;
        }
        .touch-feedback:active {
            transform: scale(0.95);
        }
        .card-shadow-hover:active {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
    }
</style>

<header class="bg-white/90 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-clone text-primary text-2xl"></i>
            <h1 class="text-xl md:text-2xl font-bold">中文卡片翻转</h1>
        </div>
        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-1 text-sm">
                <i class="fa fa-check-circle text-accent"></i>
                <span id="flipped-count" class="font-medium">0</span>
                <span>/</span>
                <span id="total-count" class="font-medium">0</span>
            </div>
            <button id="refresh-btn" class="p-3 rounded-full hover:bg-gray-100 transition-colors touch-feedback">
                <i class="fa fa-refresh text-primary text-lg"></i>
            </button>
        </div>
    </div>
</header>

// 生成卡片
function generateCards(category = 'animals') {
    // ... 现有代码 ...
    
    // 随机选择适当数量的项目（根据屏幕大小）
    const screenWidth = window.innerWidth;
    let cardCount = 6; // 更小的默认值，适合小屏幕
    if (screenWidth >= 360) cardCount = 8;
    if (screenWidth >= 640) cardCount = 12;
    if (screenWidth >= 768) cardCount = 12;
    if (screenWidth >= 1024) cardCount = 12;
    
    for (let i = 0; i < cardCount; i++) {
        createCardElement(text, index);
    }
}

// 创建卡片元素
function createCardElement(text, index) {
    // ... 现有代码 ...
    
    // 添加点击翻转事件
    cardEl.addEventListener('click', handleCardClick);
    cardEl.addEventListener('touchstart', handleCardClick);
    
    function handleCardClick() {
        // 如果已经翻转则不做处理
        if (cardEl.classList.contains('flipped')) return;
        
        // 翻转卡片
        cardEl.classList.add('flipped');
        gameState.flippedCards++;
        flippedCountEl.textContent = gameState.flippedCards;
        
        // 添加点击反馈音效（可选）
        // playFlipSound();
    }
    
    return cardEl;
}

// 事件监听
newGameBtn.addEventListener('click', newGame);
newGameBtn.addEventListener('touchstart', newGame);
refreshBtn.addEventListener('click', newGame);
refreshBtn.addEventListener('touchstart', newGame);

<button id="new-game-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-4 px-10 rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center mx-auto touch-feedback">
    <i class="fa fa-random mr-2"></i>
    <span>新游戏</span>
</button>